<template>
    <div id="container"> 
    </div>
</template>

<script setup lang="ts"> 
import { ref, onMounted, onUnmounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

//MeshBasicMaterial ➡ MeshLambertMaterial ➡ MeshPhongMaterial ➡ MeshStandardMaterial ➡ MeshPhysicalMaterial
//基本材质无光照，阴影，高光->受光照影响、无镜面、无高光->有光照、有镜面、有高光->支持金属度->支持折射 透光率，清漆层材质
onMounted(()=>{
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 300;
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('container')?.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);

    const light = new THREE.AmbientLight(0xffffff);
    scene.add(light);

    const lineLight = new THREE.DirectionalLight(0xffffff);
    lineLight.position.z = 300;
    scene.add(lineLight);

    //基本材质使用
    const geometry1 = new THREE.BoxGeometry(20,20,20);
    const material1 = new THREE.MeshPhongMaterial({
        color: 0xFF0000,
        flatShading: true,
    });
    const mesh1 = new THREE.Mesh(geometry1,material1);
    mesh1.position.set(-200,100,0);
    scene.add(mesh1);

    //先创建后设置材质属性
    const geometry2 = new THREE.BoxGeometry(20,20,20);
    const material2 = new THREE.MeshPhongMaterial();
    material2.color.setHSL(0, 1, .5); //红色
    material2.flatShading = true;
    const mesh2 = new THREE.Mesh(geometry2,material2);
    mesh2.position.set(-160,100,0);
    scene.add(mesh2);

    //不同的颜色设置方式
    // const m1 = new THREE.MeshBasicMaterial({color: 0xFF0000});         // 红色
    // const m2 = new THREE.MeshBasicMaterial({color: 'red'});            // 红色
    // const m3 = new THREE.MeshBasicMaterial({color: '#F00'});           // 红色
    // const m4 = new THREE.MeshBasicMaterial({color: 'rgb(255,0,0)'});   // 红色
    // const m5 = new THREE.MeshBasicMaterial({color: 'hsl(0,100%,50%)'}); // 红色


    //基本材质的区别
    const geometry3 = new THREE.SphereGeometry(10, 32, 32);
    const material3 = new THREE.MeshBasicMaterial({
        color: 0x00ff99,
    });
    const mesh3 = new THREE.Mesh(geometry3, material3);
    mesh3.position.set(-120,100,0);
    scene.add(mesh3);

    const geometry4 = new THREE.SphereGeometry(10, 32, 32);
    const material4 = new THREE.MeshLambertMaterial({
        color: 0x00ff99,
    });
    const mesh4 = new THREE.Mesh(geometry4, material4);
    mesh4.position.set(-80,100,0);
    scene.add(mesh4);

    const geometry5 = new THREE.SphereGeometry(10, 32, 32);
    const material5 = new THREE.MeshPhongMaterial({
        color: 0x00ff99,
    });
    const mesh5 = new THREE.Mesh(geometry5, material5);
    mesh5.position.set(-40,100,0);
    scene.add(mesh5);

    const geometry6 = new THREE.SphereGeometry(10, 32, 32);
    const material6 = new THREE.MeshPhongMaterial({
        color: 0x00ff99,
        shininess: 0,
    });
    const mesh6 = new THREE.Mesh(geometry6, material6);
    mesh6.position.set(0,100,0);
    scene.add(mesh6);

    const geometry7 = new THREE.SphereGeometry(10, 32, 32);
    const material7 = new THREE.MeshPhongMaterial({
        color: 0x00ff99,
        shininess: 30,
    });
    const mesh7 = new THREE.Mesh(geometry7, material7);
    mesh7.position.set(40,100,0);
    scene.add(mesh7);

    const geometry8 = new THREE.SphereGeometry(10, 32, 32);
    const material8 = new THREE.MeshPhongMaterial({
        color: 0x00ff99,
        shininess: 350,
    });
    const mesh8 = new THREE.Mesh(geometry8, material8);
    mesh8.position.set(80,100,0);
    scene.add(mesh8);


    const render = () => { 
        mesh1.rotation.x += 0.02;
        mesh1.rotation.y += 0.01;
        mesh2.rotation.x += 0.01;
        mesh2.rotation.y += 0.02;
        mesh3.rotation.x += 0.01;
        mesh3.rotation.y += 0.01;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
    requestAnimationFrame(render);


})

</script>

<style scoped>
</style>